<template>
    <div class="supplier-home">
        <!--首页头部 -->
        <div class="supplier-top">
            <div class="label">首页</div>
            <el-skeleton animated :rows=1 :loading="loading1" :throttle=300 style="margin-left: -26px;margin-right: 16px;">
                <template slot="template">
                    <!-- <el-skeleton-item variant="li" /> -->
                    <el-skeleton-item variant="li" />
                    <el-skeleton-item variant="li" />
                    <el-skeleton-item variant="li" />
                    <el-skeleton-item variant="li" />
                    <el-skeleton-item variant="li" />
                </template>
                <template>
                    <ul>
                        <!-- <li> -->
                        <!-- <router-link :to="'/actualOffer'">
                                <i class="panel_icon"></i>
                                <h1>{{ firstRowData.Actual.num }}</h1>
                                <p>{{ firstRowData.Actual.title }}</p>
                            </router-link> -->
                        <!-- </li> -->
                        <li>
                            <router-link :to="'/quotationTask'">
                                <i class="panel_icon"></i>
                                <h1>{{ firstRowData.Ordinary.num }}</h1>
                                <p>{{ firstRowData.Ordinary.title }}</p>
                            </router-link>
                        </li>
                        <el-divider direction="vertical"></el-divider>
                        <li>
                            <router-link :to="'/myBragining'">
                                <i class="panel_icon"></i>
                                <h1>{{ firstRowData.Price.num }}</h1>
                                <p>{{ firstRowData.Price.title }}</p>
                            </router-link>
                        </li>
                        <el-divider direction="vertical"></el-divider>
                        <li>
                            <router-link :to="'/myOrder'">
                                <i class="panel_icon"></i>
                                <h1>{{ firstRowData.Deal.num }}</h1>
                                <p>{{ firstRowData.Deal.title }}</p>
                            </router-link>
                        </li>
                        <el-divider direction="vertical"></el-divider>
                        <li>
                            <router-link :to="'/myOrder'">
                                <i class="panel_icon"></i>
                                <h1>{{ firstRowData.Payment.num }}</h1>
                                <p>{{ firstRowData.Payment.title }}</p>
                            </router-link>
                        </li>
                        <el-divider direction="vertical"></el-divider>
                        <li>
                            <router-link :to="'/awaitInvoiced'">
                                <i class="panel_icon"></i>
                                <h1>{{ firstRowData.Receipt.num }}</h1>
                                <p>{{ firstRowData.Receipt.title }}</p>
                            </router-link>

                        </li>
                    </ul>
                </template>
            </el-skeleton>

        </div>

        <!-- 首页底部 -->
        <div class="supplier-bottom">
            <el-card class="card1" shadow="never">
                <div>
                    <!-- <div class="line-chart"> -->
                    <!-- 报价采纳率 -->
                    <!-- <div class="adopt" v-loading="loading2">
                            <div class="adopt-header">
                                <span class="title">报价采纳率</span>
                                <span class="count">（按月统计）</span>
                            </div>
                            <div id="main" style="height: 420px"></div>
                        </div> -->
                    <!-- 订单统计 -->
                    <!-- <div class="order">
                            <div class="order-header">
                                <span class="title">订单统计</span>
                                <span class="count">（按月统计）</span>
                            </div>
                            <div id="order" style=" height: 380px"></div>
                        </div> -->
                    <!-- 成交金额统计 -->
                    <!-- <div class="deal-money">
                            <div class="deal-money-header">
                                <span class="title">成交金额统计</span>
                                <span class="count">（按月统计）</span>
                            </div>
                            <div id="deal-money" style="height: 380px"></div>
                        </div> -->
                    <!-- </div> -->



                    <el-tabs v-model="activeName" @tab-click="handleClick">
                        <el-tab-pane label="实单求购" name="first">
                            <div v-if="isEmpty">
                                <div class="empty">
                                    <div class="box">
                                        <img src="@/assets/images/empty.png" alt="" style="width:100%">
                                        <el-button type="primary" @click="toUploadStock" v-if="isButton">上传库存</el-button>
                                    </div>
                                </div>
                            </div>
                            <div v-else>
                                <myTable :config="tableconfig">
                                    <!-- 操作 -->
                                    <template v-slot:operation="{ data }">
                                        <el-button type="text" @click="handleQuote(data)">报价</el-button>
                                    </template>
                                    <!-- 价格 -->
                                    <template v-slot:unitPrice="{ data }">
                                        <div style="color:#00AB2B;">{{ Number.isInteger(data.unitPrice) ?
                                            data.unitPrice.toFixed(2) : data.unitPrice }}</div>
                                    </template>
                                </myTable>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="报价采纳率" name="second">
                            <div class="line-chart">
                                <!-- 报价采纳率 -->
                                <div class="adopt" v-loading="loading2">
                                    <div class="adopt-header">
                                        <span class="title">报价采纳率</span>
                                        <span class="count">（按月统计）</span>
                                    </div>
                                    <div id="main"></div>
                                </div>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="订单统计" name="third">
                            <div class="line-chart">
                                <!-- 订单统计 -->
                                <div class="order" v-loading="loading3">
                                    <div class="order-header">
                                        <span class="title">订单统计</span>
                                        <span class="count">（按月统计）</span>
                                    </div>
                                    <div id="order"></div>
                                </div>
                            </div>

                        </el-tab-pane>
                        <el-tab-pane label="成交金额统计" name="fourth">
                            <div class="line-chart">
                                <!-- 成交金额统计 -->
                                <div class="deal-money" v-loading="loading4">
                                    <div class="deal-money-header">
                                        <span class="title">成交金额统计</span>
                                        <span class="count">（按月统计）</span>
                                    </div>
                                    <div id="deal-money"></div>
                                </div>
                            </div>

                        </el-tab-pane>
                    </el-tabs>
                </div>
            </el-card>
            <el-card class="card2" shadow="never">
                <div>
                    <div class="hotPopular">热门询价</div>
                    <div class="item">
                        <el-row>
                            <el-col :span="8">
                                <div class="box" style="margin-right: 10px;">
                                    <div class="topImg">
                                        <img src="@/assets/images/top1.svg" alt="">
                                    </div>
                                    <div class="left">
                                        <div class="left-top">
                                            <div class="key">型号</div>
                                            <el-tooltip effect="dark" :content=populer.top1.partNumber
                                                placement="top-start">
                                                <div class="value">{{ populer.top1.partNumber }}</div>
                                            </el-tooltip>
                                        </div>
                                        <div class="left-bottom">
                                            <div class="key">品牌</div>
                                            <el-tooltip effect="dark" :content=populer.top1.brand placement="top-start">
                                                <div class="value">{{ populer.top1.brand }}</div>
                                            </el-tooltip>
                                        </div>
                                    </div>
                                </div>
                            </el-col>
                            <el-col :span="8">
                                <div class="box" style="margin:0 10px">
                                    <div class="topImg">
                                        <img src="@/assets/images/top2.svg" alt="">
                                    </div>
                                    <div class="left">
                                        <div class="left-top">
                                            <div class="key">型号</div>
                                            <el-tooltip effect="dark" :content=populer.top2.partNumber
                                                placement="top-start">
                                                <div class="value">{{ populer.top2.partNumber }}</div>
                                            </el-tooltip>

                                        </div>
                                        <div class="left-bottom">
                                            <div class="key">品牌</div>
                                            <el-tooltip effect="dark" :content=populer.top2.brand placement="top-start">
                                                <div class="value">{{ populer.top2.brand }}</div>
                                            </el-tooltip>

                                        </div>
                                    </div>
                                </div>
                            </el-col>
                            <el-col :span="8">
                                <div class="box" style="margin-left:10px;">
                                    <div class="topImg">
                                        <img src="@/assets/images/top3.svg" alt="">
                                    </div>
                                    <div class="left">
                                        <div class="left-top">
                                            <div class="key">型号</div>
                                            <el-tooltip effect="dark" :content=populer.top3.partNumber
                                                placement="top-start">
                                                <div class="value">{{ populer.top3.partNumber }}</div>
                                            </el-tooltip>
                                        </div>
                                        <div class="left-bottom">
                                            <div class="key">品牌</div>
                                            <el-tooltip effect="dark" :content=populer.top3.brand
                                                placement="top-start">
                                                <div class="value" ref="tooltipContentRef">{{ populer.top3.brand }}</div>
                                            </el-tooltip>
                                        </div>
                                    </div>
                                </div>
                            </el-col>
                        </el-row>
                    </div>
                    <div class="hotTable">
                        <hotTable :config="hotTableconfig">
                            <template v-slot:hotlevel>
                                <span v-for="item in 3">
                                    <svg-icon icon-class="fire" :key="item" style="width: 20px; height: 20px" />
                                </span>
                            </template>
                        </hotTable>
                    </div>

                </div>
            </el-card>
            <el-drawer title="" size="560px" :visible.sync="drawerVisible" v-if="drawerVisible">
                <div slot="title" class="drawer">
                    <span class="title">供应商报价</span>
                    <span class="inquiryID">询价单号：{{ qutoData.id }}</span>
                    <!-- <el-divider /> -->
                </div>
                <quto :qutoData='qutoData' :isHome="true" @close="drawerVisible = !drawerVisible, handleQuery()" />
            </el-drawer>
        </div>
    </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import * as echarts from 'echarts';
import myTable from "@/views/manageOffer/components/table.vue"
import hotTable from "@/components/hotTable/index.vue"
import {
    GetHomePageData,
    GetHomePageData1,
    GetHomePageSupplierQuoteStatistics,
    getDYJtoken,
    getWaitInfo,
    GetOrderNumberStatistics,
    GetOrderAmountStatistics,
    getWaitInfoPay,
} from '@/api/index-page-api/index';
import { getSuppliers, popularInquiry, realInquiry } from '@/api/scsapi/index';
import { queryInventory } from '@/api/stock.js'
import quto from '@/views/manageOffer/components/quto';
import { isEmpty } from 'lodash';

export default {
    //import引入的组件需要注入到对象中才能使用
    components: {
        myTable,
        hotTable,
        quto
    },
    data() {
        return {
            form: {
                brand: "",
                endDate: "",
                id: "",
                inventoryHome: "",
                ladderPriceId: "",
                partNumber: "",
                startDate: "",
                status: "",
                unitPriceType: "",
                createDate: [],
                pageNo: 1,
                pageSize: 10,
            },
            isButton: false,
            hotList: [],
            qutoData: {},
            drawerVisible: false,
            activeName: "first",
            isEmpty: false,
            tableconfig: {
                loading: false,
                isselection: false,
                ispagination: false,
                // maxheight: 500,
                tabledata: [],
                isindex: false,
                thead: [
                    { sort: null, label: "型号", prop: "partNumber" },
                    { sort: null, label: "品牌", prop: "brand" },
                    // { sort: null, label: "任务处理器", prop: "jobHandler" },
                    { sort: null, label: "数量", prop: "quantity" },
                    { sort: null, label: "目标价", prop: "unitPrice", type: 'slot' },
                    { sort: null, label: "操作", prop: "operation", type: 'slot' },
                ],
                currentpage: 1,
                pagesize: 1,
                total: 3,
            },
            hotTableconfig: {
                loading: false,
                isselection: false,
                ispagination: false,
                // maxheight: 870,
                tabledata: [],
                isindex: false,
                thead: [
                    { sort: null, label: "询价热度", prop: "hotlevel", type: 'slot' },
                    { sort: null, label: "型号", prop: "partNumber" },
                    { sort: null, label: "品牌", prop: "brand" },
                ],
                currentpage: 1,
                pagesize: 1,
                total: 3,
            },
            loading1: true,
            loading2: true,
            chart1: undefined,
            loading3: true,
            loading4: true,
            firstRowData: {
                Actual: {
                    num: 0,
                    title: '实单待报价',
                },
                Ordinary: {
                    num: 0,
                    title: '待报价',
                },
                Price: {
                    num: 0,
                    title: '待议价',
                },
                Deal: {
                    num: 0,
                    title: '待交货',
                },
                Payment: {
                    num: 0,
                    title: '待付款',
                },
                Receipt: {
                    num: 99,
                    title: '待开发票',
                },
            },
            populer: {
                top1: {
                    partNumber: "",
                    brand: "",
                },
                top2: {
                    partNumber: "",
                    brand: "",
                },
                top3: {
                    partNumber: "",
                    brand: "",
                },
            },
        };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //生命周期 - 挂载完成（可以访问DOM元素）
    created() {
        this.handleQuery()
    },
    async mounted() {
        // 库存数据
        await this.handleInventory();
        // 实单数据
        // await  this.handleRealInquiry();
        //热门询价
        await this.handlePopularInquiry();

        let flag = null;
        window.addEventListener('resize', () => {
            if (flag) {
                clearTimeout(flag);
            }
            flag = setTimeout(() => {
                this.chart1 && this.chart1.resize();
                this.chart2 && this.chart2.resize();
                this.chart3 && this.chart3.resize();
            }, 200);
        });

        // 报价采纳率
        // this.initEchart1();
        // this.initEchart2();
        // this.initEchart3();

        let suppliers = await getSuppliers();
        let suppliernames = [];
        if (suppliers.data) {
            suppliernames = suppliers.data.map(x => x.supplierName);
        }
        let token = await getDYJtoken();
        let datas = {};
        let dataObj = {};
        if (token && token.taken) {
            datas = await getWaitInfo({ key: token.taken, gys: suppliernames.join('|') });
            if (datas.status == 200) {
                this.firstRowData.Deal.num = datas.data;
            }
            dataObj = await getWaitInfoPay({ key: token.taken, gys: suppliernames.join('|') });
            if (dataObj.status == 200) {
                this.firstRowData.Payment.num = dataObj.data;
            }
        }
        Promise.all([GetHomePageData(), GetHomePageData1()])
            .then(res => {
                if (res[0].status == 200) {
                    this.firstRowData.Actual.num = res[0].data.realWaitingCount;
                    this.firstRowData.Ordinary.num = res[0].data.normalWaitingCount;
                    this.firstRowData.Price.num = res[0].data.bargainingCount;
                }
                if (res[1].data.status_code == 200) {
                    this.firstRowData.Receipt.num = res[1].data.count;
                }
                this.loading1 = false;
                this.$forceUpdate();
            })
            .catch(err => {
                this.loading1 = false;
            });
    },
    //方法集合
    methods: {
        handleClick(tab, event) {
            if (tab.name == 'second') {
                this.initEchart1();
            } else if (tab.name == 'third') {
                this.initEchart2();
            } else if (tab.name == 'fourth') {
                this.initEchart3();
            } else {
                this.handleRealInquiry();
            }
        },
        // 获取实弹求购数据
        handleRealInquiry() {
            realInquiry().then(res => {
                if (res.success) {
                    if (res.data.length) {
                        this.tableconfig.tabledata = res.data
                        this.isEmpty = false
                        this.isButton = false;
                    } else {
                        this.isButton = false;
                        this.isEmpty = true;
                        //实弹求购
                    }
                }
            })
        },
        // 实弹求购表格为空时需要上传库存
        toUploadStock() {
            this.$router.push('./uploadStock')
        },
        // 热门询价
        handlePopularInquiry() {
            popularInquiry().then(res => {
                this.hotTableconfig.tabledata = res.data.splice(3)
                this.hotList = res.data.slice(0, 3)
                this.populer.top1.partNumber = this.hotList[0].partNumber;
                this.populer.top1.brand = this.hotList[0].brand;
                this.populer.top2.partNumber = this.hotList[1].partNumber;
                this.populer.top2.brand = this.hotList[1].brand;
                this.populer.top3.partNumber = this.hotList[2].partNumber;
                this.populer.top3.brand = this.hotList[2].brand;
            })
        },
        // 报价
        handleQuote(data) {
            this.drawerVisible = true;
            console.log('data', data)
            this.qutoData = data
        },
        // 查询库存数据
        handleInventory() {
            queryInventory(this.form).then(res => {
                console.log('res', res.result.data)
                if (res.result.data.length) {
                    this.isEmpty = false;
                    this.isButton = false;
                    this.handleRealInquiry()
                } else {
                    this.isEmpty = true;
                    this.isButton = true;

                }
            })
        },
        handleQuery() {
            this.handleRealInquiry();
        },
        // 报价采纳率
        initEchart1() {
            let Year = new Date().getFullYear();
            GetHomePageSupplierQuoteStatistics({ year: Year })
                .then(res => {
                    if (res.status == 200) {
                        // x轴数据
                        let dataObj = {};
                        // 报价任务数  realInquiryCount
                        // 报价数 normalInquiryCount
                        // 采纳数 realQuoteCount
                        res.data.forEach(x => {
                            // 报价任务数
                            x.num1 = Number(x.realInquiryCount) + Number(x.normalInquiryCount);
                            dataObj.realInquiryCount
                                ? dataObj.realInquiryCount.push(x.num1)
                                : (dataObj.realInquiryCount = [x.num1]);
                            // 报价数
                            x.num2 = Number(x.realQuoteCount) + Number(x.normalQuoteCount);
                            dataObj.normalInquiryCount
                                ? dataObj.normalInquiryCount.push(x.num2)
                                : (dataObj.normalInquiryCount = [x.num2]);
                            // 采纳数
                            x.num3 = Number(x.realAcceptCount) + Number(x.normalAcceptCount);
                            dataObj.realQuoteCount
                                ? dataObj.realQuoteCount.push(x.num3)
                                : (dataObj.realQuoteCount = [x.num3]);
                            let rate1 = (
                                ((x.normalQuoteCount * 1 + x.realQuoteCount * 1) /
                                    (x.normalInquiryCount * 1 + x.realInquiryCount * 1 || 1)) *
                                100
                            ).toFixed(2);
                            let rate2 = (
                                ((x.normalAcceptCount * 1 + x.realAcceptCount * 1) /
                                    (x.normalQuoteCount * 1 + x.realQuoteCount * 1 || 1)) *
                                100
                            ).toFixed(2);
                            dataObj.rate1 ? dataObj.rate1.push(rate1) : (dataObj.rate1 = [rate1]);
                            dataObj.rate2 ? dataObj.rate2.push(rate2) : (dataObj.rate2 = [rate2]);
                        });
                        var chartDom = document.getElementById('main');
                        this.chart1 = echarts.init(chartDom);
                        var option;
                        option = {
                            tooltip: {
                                trigger: 'axis',
                                axisPointer: {
                                    type: 'cross',
                                    crossStyle: {
                                        color: '#999',
                                    },
                                },
                            },

                            legend: {
                                bottom: 10,
                                data: [
                                    '报价任务数',
                                    '报价数',
                                    '采纳数',
                                    '报价率',
                                    '采纳率',
                                ],
                            },
                            xAxis: [
                                {
                                    type: 'category',
                                    // axisPointer: {
                                    //     type: 'shadow',
                                    // },
                                    data: [
                                        '1月',
                                        '2月',
                                        '3月',
                                        '4月',
                                        '5月',
                                        '6月',
                                        '7月',
                                        '8月',
                                        '9月',
                                        '10月',
                                        '11月',
                                        '12月',
                                    ],
                                },
                            ],
                            yAxis: [
                                {
                                    type: 'value',
                                    name: '询报价数量（个）',
                                    axisLine: {
                                        show: false,
                                    },
                                    axisLabel: {
                                        formatter: '{value} ',
                                    },
                                },
                                {
                                    type: 'value',
                                    name: '率值',
                                    axisLine: {
                                        show: false,
                                    },
                                    splitLine: false,
                                    axisLabel: {
                                        formatter: '{value} %',
                                    },
                                },
                            ],
                            series: [
                                {
                                    name: '报价任务数',
                                    // yAxisIndex: 0,
                                    type: 'bar',
                                    // stack: 'a',
                                    emphasis: {
                                        focus: 'series',
                                    },
                                    itemStyle: {
                                        color: '#5BE3F9',
                                    },
                                    barWidth: 15,
                                    data: dataObj.realInquiryCount,
                                },
                                {
                                    name: '报价数',
                                    // yAxisIndex: 0,
                                    type: 'bar',
                                    // stack: 'a',
                                    emphasis: {
                                        focus: 'series',
                                    },
                                    itemStyle: {
                                        color: '#2348E8',
                                    },
                                    barWidth: 15,
                                    data: dataObj.normalInquiryCount,
                                },
                                {
                                    name: '采纳数',
                                    // yAxisIndex: 0,
                                    type: 'bar',
                                    // stack: 'b',
                                    emphasis: {
                                        focus: 'series',
                                    },
                                    itemStyle: {
                                        color: '#F7B500',
                                    },
                                    barWidth: 15,
                                    data: dataObj.realQuoteCount,
                                },
                                {
                                    name: '报价率',
                                    // yAxisIndex: 1,
                                    type: 'line',
                                    data: dataObj.rate1,
                                    itemStyle: {
                                        color: '#5B8FF9',
                                    },
                                },
                                {
                                    name: '采纳率',
                                    // yAxisIndex: 1,
                                    type: 'line',
                                    data: dataObj.rate2,
                                    itemStyle: {
                                        color: '#F95B5B',
                                    },
                                },
                            ],
                        };
                        option && this.chart1.setOption(option);
                    }
                    this.loading2 = false;
                })
                .catch(err => {
                    this.loading2 = false;
                });
        },
        initEchart2() {
            GetOrderNumberStatistics()
                .then(res => {
                    if (res.status == 200) {
                        let datas = res.data;
                        datas = datas.sort((a, b) => {
                            a.month - b.month;
                        });
                        datas = datas.map(x => x.orderNumbers);
                        var chartDom1 = document.getElementById('order');
                        var myChart1 = echarts.init(chartDom1);
                        var option1;
                        option1 = {
                            tooltip: {
                                trigger: 'axis',
                            },
                            legend: {
                                data: ['数量'],
                                bottom: 10,
                            },
                            xAxis: {
                                type: 'category',
                                name: '月份',
                                data: [
                                    '1月',
                                    '2月',
                                    '3月',
                                    '4月',
                                    '5月',
                                    '6月',
                                    '7月',
                                    '8月',
                                    '9月',
                                    '10月',
                                    '11月',
                                    '12月',
                                ],
                            },
                            yAxis: {
                                type: 'value',
                                name: '数量（个）',
                                axisLine: {
                                    show: false,
                                },
                            },
                            series: [
                                {
                                    name: '数量',
                                    data: datas,
                                    type: 'line',
                                    itemStyle: {
                                        normal: {
                                            color: '#6190F4',
                                            lineStyle: {
                                                color: '#6190F4',
                                            },
                                        },
                                    },
                                },
                            ],
                        };

                        option1 && myChart1.setOption(option1);
                    }
                    this.loading3 = false;
                })
                .catch(err => {
                    this.loading3 = false;
                });
        },

        initEchart3() {
            GetOrderAmountStatistics()
                .then(res => {
                    if (res.status == 200) {
                        let data1 = res.data.orderAmountCny.sort((a, b) => {
                            a.month - b.month;
                        });
                        data1 = data1.map(x => x.orderAmount);
                        let data2 = res.data.orderAmountUsd.sort((a, b) => {
                            a.month - b.month;
                        });
                        data2 = data2.map(x => x.orderAmount);
                        var chartDom2 = document.getElementById('deal-money');
                        var myChart2 = echarts.init(chartDom2);
                        var option2;

                        option2 = {
                            tooltip: {
                                trigger: 'axis',
                            },
                            legend: {
                                bottom: 10,
                                data: ['人民币', '美金'],
                            },
                            xAxis: {
                                type: 'category',
                                name: '月份',
                                data: [
                                    '1月',
                                    '2月',
                                    '3月',
                                    '4月',
                                    '5月',
                                    '6月',
                                    '7月',
                                    '8月',
                                    '9月',
                                    '10月',
                                    '11月',
                                    '12月',
                                ],
                            },
                            yAxis: {
                                type: 'value',
                                name: '金额（万元）',
                                axisLine: {
                                    show: false,
                                },
                            },
                            series: [
                                {
                                    name: '人民币',
                                    data: data1,
                                    type: 'line',
                                },
                                {
                                    name: '美金',
                                    type: 'line',
                                    itemStyle: {
                                        normal: {
                                            color: '#2AB453',
                                            lineStyle: {
                                                color: '#2AB453',
                                            },
                                        },
                                    },
                                    data: data2,
                                },
                            ],
                        };

                        option2 && myChart2.setOption(option2);
                        this.loading4 = false;
                    }
                })
                .catch(err => {
                    this.loading4 = false;
                });
        },
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() { },
    //beforeCreate() {}, //生命周期 - 创建之前
    //beforeMount() {}, //生命周期 - 挂载之前
    //beforeUpdate() {}, //生命周期 - 更新之前
    //updated() {}, //生命周期 - 更新之后
    //beforeDestroy() {}, //生命周期 - 销毁之前
    //destroyed() {}, //生命周期 - 销毁完成
    //activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped lang="scss" src="@/assets/styles/public.scss"></style>
<style  scoped lang="scss">
.supplier-home {
    height: calc(100vh - 120px);
    // overflow-y: auto;

    .supplier-top {
        background: url(../assets/images/indexbg.png) no-repeat;
        background-size: 100% 100%;
        // margin: 13px 35px 13px 35px;
        padding-bottom: 3px;
        border-radius: 8px;
        margin-bottom: 10px;

        .label {
            font-size: 18px;
            font-weight: 600;
            color: #1A2035;
            // margin: 15px 0 15px 16px;
            padding: 15px 0 0 16px;
        }

        ul {
            display: flex;
            justify-content: space-between;
            // margin: 15px 0 15px 0;

            .el-divider--vertical {
                height: 100px;
            }

            li {
                // width: 14.29%;
                // height: 114px;
                list-style: none;
                position: relative;
                width: 242px;
                height: 100px;
                background: #FFFFFF;
                border-radius: 8px;
                border: 1px solid #EEEEEE;

                p {
                    margin: 0 0 17px 20px;
                    font-size: 14px;
                    color: #1A2035;
                }

                h1 {
                    font-size: 32px;
                    color: #333;
                    margin: 17px 0 10px 21px;
                }
            }
        }

        ::v-deep .el-skeleton {
            display: flex;
            justify-content: space-between;
            margin: 15.5px 35px 15px 0;
            padding: 0 40px;

            .el-skeleton__li {
                width: 14.29%;
                height: 114px;
            }
        }
    }

    ::v-deep .el-tabs__nav {
        margin-left: 0 !important;
    }

    ::v-deep .el-pagination {
        position: absolute;
    }

    .supplier-top li .panel_icon {
        width: 34px;
        height: 34px;
        background: url(../assets/indexIcon/icon1.svg) no-repeat;
        background-size: cover;
        position: absolute;
        top: 33px;
        right: 34px;
    }

    .supplier-top li:nth-child(3) {
        // background: url(../assets/images/ptdbj-bg.png) no-repeat;
        // background-size: 100% 100%;
    }

    .supplier-top li:nth-child(3) .panel_icon {
        background: url(../assets/indexIcon/icon2.svg) no-repeat;
    }

    .supplier-top li:nth-child(5) {
        // background: url(../assets/images/yjdcl-bg.png) no-repeat;
        // background-size: 100% 100%;
    }

    .supplier-top li:nth-child(5) .panel_icon {
        background: url(../assets/indexIcon/icon3.svg) no-repeat;
    }

    .supplier-top li:nth-child(4) {
        // background: url(../assets/images/djh-bg.png) no-repeat;
        // background-size: 100% 100%;
    }

    .supplier-top li:nth-child(7) .panel_icon {
        background: url(../assets/indexIcon/icon4.svg) no-repeat;
    }

    .supplier-top li:nth-child(5) {
        // background: url(../assets/images/dmjfk-bg.png) no-repeat;
        // background-size: 100% 100%;
    }

    .supplier-top li:nth-child(9) .panel_icon {
        color: #aaa;
        // background: url(../assets/indexIcon/icon5.svg) no-repeat;
        background: url(../assets/indexIcon/icon5.svg);
    }

    .supplier-top li:nth-child(6) {
        //     background: url(../assets/images/dkfp-bg.png) no-repeat;
        //     background-size: 100% 100%;
    }

    .supplier-top li:nth-child(6) .panel_icon {
        background: url(../assets/indexIcon/icon5.svg) no-repeat;
    }

    .supplier-bottom {
        display: flex;
        justify-content: space-between;
        height: calc(100% - 120px);

        // margin-right: 32px;
        .card1 {
            width: 63%;
            // height: 696px;
            // margin: 0 34px;
            border-radius: 8px;
            margin-right: 14px;
            margin-bottom: 10px;

            ::v-deep.el-tabs__header {
                margin-bottom: 15px !important;
            }

            ::v-deep.el-tabs__item {
                font-weight: 600 !important;
            }

            ::v-deep.el-tabs__item:hover {
                color: #1A2035 !important;
            }

            ::v-deep.el-tabs__item.is-active {
                color: #1A2035 !important;
            }

            ::v-deep.el-tabs__active-bar {
                background: #2348E8 !important;
            }

            ::v-deep.el-tabs__nav-wrap::after {
                height: 1px !important;
            }

            .title {
                font-size: 14px;
                font-weight: 700;
            }

            .count {
                font-size: 14px;
                color: #c0c4cc;
            }

            .adopt {
                width: 100%;
                // border: 1px solid #eee;
                border-radius: 5px;

                .adopt-header {
                    // margin-left: 19px;
                    // margin-top: 7px;
                }

                #main {
                    height: calc(100vh - 350px);
                }
            }

            // .line-chart {
            //     display: flex;
            // margin-top: 36px;

            .order {
                width: 100%;
                // border: 1px solid #eee;
                border-radius: 5px;
                margin-right: 10px;

                .order-header {
                    // margin-left: 19px;
                    // margin-top: 7px;
                }

                #order {
                    height: calc(100vh - 350px);
                }
            }

            .deal-money {
                width: 100%;
                // border: 1px solid #eee;
                border-radius: 5px;

                .deal-money-header {
                    // margin-left: 19px;
                    // margin-top: 7px;
                }

                #deal-money {
                    height: calc(100vh - 350px);
                }
            }

            // }
        }

        .card2 {
            width: 37%;
            // height: 696px;
            margin-bottom: 10px;
        }
    }

    .empty {
        .box {
            text-align: center;
            margin-top: 7%;

            .el-button--primary {
                background-color: #2348E8 !important;
                border-color: #2348E8;
                color: #fff;
            }
        }
    }

    // .el-button--primary {
    //     border-color: #2348E8;
    //     background-color: #fff;
    //     color: #2348E8;
    // }

    // .el-button--primary:hover,
    // .el-button--primary:focus {
    //     background-color: #2348E8;
    //     color: #fff;
    // }
    .el-button--primary {
        background-color: #fff !important;
        color: #2348E8;
    }

    // .el-button--primary:hover,
    // .el-button--primary:focus {
    //     background-color: #2348E8 !important;
    //     color: #fff;
    // }

    .hotPopular {
        margin: 11px 0 5px 0;
        font-size: 16px;
        font-weight: 600;
        color: #333333;
        line-height: 22px;

        // .list{
        //     width: 100%;
        //     height: 100px;
        //     border: 1px solid #eee;
        // }
    }

    .item {
        // display: flex;
        margin-bottom: 10px;
        // justify-content: space-between;
        margin-top: 20px;

        .el-row {
            .el-col.el-col-8 {
                // margin-right: 10px;

                // &:nth-child(2) {
                //     margin-right: 0;
                // }
                // &:nth-child(3) {
                //     margin-right: 0;
                // }
            }
        }

        .box {
            // width: 90%;
            height: 100px;
            border: 1px solid #eee;
            // display: flex;
            // justify-content: space-between;
            position: relative;

            // margin-right: 25px;
            .topImg {
                position: absolute;
                top: -13px;
                // left: 15px;
                right: -10px;
            }

            .left {
                margin: 15px 0 15px 16px;
                overflow: hidden;

                .left-top {
                    font-size: 10px;
                    font-weight: 400;
                    margin-bottom: 10px;

                    .key {
                        color: #999;
                        white-space: nowrap;
                    }

                    .value {
                        color: #1A2035;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        // width: 72px;
                    }
                }

                .left-bottom {
                    font-size: 10px;
                    font-weight: 400;

                    .key {
                        color: #999;
                        white-space: nowrap;
                    }

                    .value {
                        color: #1A2035;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        // width: 72px;
                    }
                }
            }

            .right {
                position: absolute;
                right: 11px;
                top: 18px;
            }
        }

    }

    .list {
        // display: flex;
        // justify-content: space-between;
        position: relative;
        display: inline-block;
        margin-right: 25px;

        .topImg {
            position: absolute;
            top: -9px;
            // left: 15px;
            // right:10px;
        }

        .top {
            width: 170px;
            height: 100px;
            background: #FFFFFF;
            border-radius: 4px;
            border: 1px solid #EEEEEE;
            display: flex;

            // .left {

            //     font-size: 10px;
            //     margin: 16px 0 0 10px;

            //     .left-top {
            //         margin-right: 22px;

            //         .key {
            //             font-weight: 400;
            //             color: #999999;
            //         }

            //         .value {
            //             font-weight: 400;
            //             color: #1A2035;
            //             margin-bottom: 10px;
            //             overflow: hidden;
            //             text-overflow: ellipsis;
            //             white-space: nowrap;
            //             width: 76px;
            //         }
            //     }

            //     .left-bottom {
            //         min-width: 76px;
            //         margin-right: 22px;

            //         .key {
            //             font-weight: 400;
            //             color: #999999;
            //         }

            //         .value {
            //             font-weight: 400;
            //             color: #1A2035;
            //             overflow: hidden;
            //             text-overflow: ellipsis;
            //             white-space: nowrap;
            //             width: 76px;
            //         }
            //     }
            // }

            // .right {
            //     img {
            //         margin-top: 25px;
            //         margin-right: 11px;
            //     }
            // }
        }
    }

    .hotTable {
        // margin: 0 16px 0 25px;
    }

    ::v-deep .el-drawer__header {
        // margin-bottom: 0px !important;
        align-items: baseline;

        .drawer {
            .title {
                color: #1A2035;
                font-weight: 600;
                margin-right: 10px;
                font-size: 16px;
            }

            .inquiryID {
                font-size: 12px;
                color: #333;
                font-weight: 400;
            }
        }

        .el-divider {
            // margin: 0 0 20px 0;
        }
    }
}
</style>